<template>
    <div>{{msg}}</div>
    <div class="mui-content banpenStep2 mui-scroll-wrapper mgb2">
        <div class="mui-scroll">
            <!--服务信息-->
            <div class="slwy-panel mgt1">
                <div class="panel-content">
                    <div class="panel-title">服务信息</div>
                    <ul class="mui-table-view serviceNetwork">
                        <li class="mui-table-view-cell repairCompany" v-link="{name:'enterprise',params:{from:'banpen2'}}">
                            <p class="mui-navigate-right text2-size color2" v-if="enterprise.name!=''||enterprise.name!=null">{{enterprise.name}}</p>
                            <p class="mui-navigate-right text2-size color3" v-if="enterprise.name==''||enterprise.name==null">选择服务单位</p>
                        </li>
                        <li class="mui-table-view-cell serviceItem table-view-cell-text" v-if="spec!=''">{{spec}}</li>
                        <li class="mui-table-view-cell totalAmount">
                            <div class="title-left  table-view-cell-text">预估合计</div>
                            <div class="title-right price">
                                <span class="num">{{total | currency '￥' 2}}</span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <!--联系人信息-->
            <div class="slwy-panel">
                <div class="panel-content">
                    <div class="panel-title">联系人</div>
                    <!--添加联系人-->
                    <ul class="mui-table-view">
                        <li class="mui-table-view-cell addContact">
                            <a href="#contactInputWrap" class="mui-navigate-right"
                               v-if="contract.contractName.length&&contract.contractPhone.length">
                                <span class="text3-size color2" id="contactName">{{contract.contractName}}</span>
                                <span class="mui-pull-right mgr1">
                                <i class="mui-icon mui-icon-phone-filled color2 text2-size"></i>
                                <span class="color2 text3-size" id="contactTel">{{contract.contractPhone}}</span>
                            </span>
                            </a>
                            <a href="#contactInputWrap" class="addContactBtn text2-size color4" v-else>添加联系人信息</a>
                        </li>
                    </ul>
                </div>
            </div>
            <!--车损照片-->
            <div class="slwy-panel feedback">
                <div class="panel-content">
                    <div class="panel-title">车损照片</div>
                    <!--添加图片-->
                    <div id='image-list' class="row image-list mui-clearfix">
                        <p class="Tips">请提供车损部位照片，以便更准确的确定服务价格。</p>
                        <ul class="upImg" v-show="photoIds.lenght != 0">
                            <li class="image-item" v-for="(index, pair) in photoIds">
                                <img v-bind:src="pair.local" alt="">
                                <i class="mui-icon mui-icon-closeempty delUpImg" @click="delImage(index)"></i>
                            </li>
                        </ul>
                        <div v-if="photoIds.length < maxPhoto" class="addImageBtn" @click="addImage()" id="picture"></div>
                    </div>
                </div>
            </div>
            <!--车辆出险-->
            <div class="slwy-panel feedback">
                <div class="panel-content">
                    <div class="panel-title">费用类型</div>

                    <!--车辆出险选择-->
                    <ul class="mui-table-view costType">
                        <li class="mui-table-view-cell">
                            <div class="mui-input-row mui-checkbox">
                                <label class="text2-size color2">自费钣喷</label>
                                <input name="checkbox1" value="自费钣喷" type="checkbox" checked="checked" disabled="disabled" class="insuranceCheck">
                            </div>
                        </li>
                        <li class="mui-table-view-cell">
                            <div class="mui-input-row mui-checkbox">
                                <label class="text2-size color2">保险钣喷</label>
                                <input name="checkbox1" value="保险钣喷" type="checkbox" class="insuranceCheck" @click="insuranceCheck($event)">
                            </div>
                        </li>
                    </ul>

                </div>
            </div>
        </div>
    </div>
    <!--添加联系人底部弹窗-->
    <div id="contactInputWrap" class="mui-popover mui-popover-action mui-popover-bottom">
        <div action="" class="mui-input-group">
            <h1 class="contactInputTitle">添加联系人</h1>
            <div class="mui-input-row">
                <label class="color1 text3-size mui-pull-right">联系人</label>
                <input class="color2 text3-size mui-pull-right" id="contactInput" v-model="contract.contractName"
                       type="text" placeholder="请输入联系人" v-model="contractName">
            </div>
            <div class="mui-input-row">
                <label class="color1 text3-size mui-pull-right">联系方式</label>
                <input class="color2 text3-size mui-pull-right" id="contactInfoInput"
                       v-model="contract.contractPhone"  type="tel" pattern="[0-9]*" class="mui-input-clear" maxlength="11"  placeholder="请输入联系方式" v-model="contractPhone">
            </div>
            <div class="operateBtn">
                <button class="mui-btn mui-btn-primary" @click="updContract()">确认</button>
            </div>
        </div>
    </div>
    <!--确认服务按钮-->
    <div class="fixedOperate">
        <button class="mui-btn mui-btn-primary" @click="confirm()">确认服务</button>
    </div>
</template>
<style>
    .banpenStep2 .title-left, .title-right {
        width: 50%;
        float: left;
    }

    .banpenStep2 .serviceItem, .totalAmount {
        color: #8f8f94;
        font-size: .28rem;
        line-height: 0.45rem;
    }

    .banpenStep2 .title-right {
        color: #ff8317;
        font-size: .4rem;
        text-align: right;
    }

    .banpenStep2 .addContact .addContactBtn {
        font-size: .28rem;
        color: #2f77e3 !important;
        line-height: 0.6rem;
        text-align: center;
    }

    /*添加图片*/
    .banpenStep2 .image-list {
        padding: .3rem;
    }

    .banpenStep2 .image-list .image-item {
        width: 1.2rem;
        height: 1.2rem;
        margin-right: 0.15rem;
        margin-bottom: 0.15rem;
        text-align: center;
        vertical-align: middle;
        display: inline-block;
        position: relative;
        float: left;
    }

    .banpenStep2 .image-item img {
        max-width: 1.2rem;
        max-height: 1.2rem;
        z-index: 20;
    }
    .banpenStep2 .image-item .delUpImg{
        font-size: 0.4rem !important;
        position: absolute;
        top: -0.1rem;
        right: -0.1rem;
        color: #fff;
        background: rgba(0,0,0,0.4);
        width: 0.4rem;
        height: 0.4rem;
        border-radius: 100%;
        text-align: center;
        line-height: 0.4rem;
    }

    .banpenStep2 .image-list .addImageBtn {
        float: left;
        width: 1.2rem;
        height: 1.2rem;
        background-image: url("../../images/iconfont-tianjia.png");
        background-repeat: no-repeat;
        background-size: 100%;
    }

    .banpenStep2 .pomptIcon {
        display: inline-block;
        width: .34rem;
        height: .34rem;
        background: url('../../images/prompt-icon.svg') no-repeat;
        background-size: .34rem .34rem;
        vertical-align: top;
        margin-top: .22rem;
        cursor: pointer;
    }

    /*费用类型*/
    .costType label{padding: 0.15rem 0 0.1rem 0 !important;}
    .costType .insuranceCheck{ top: 0 !important;  width: 0.5rem !important; right: 0.2rem !important;}
    .insurance {
        line-height: .8rem;
        padding: 0 .3rem;
        font-size: .3rem;
    }

    .insuranceCheck {
        top: 0.1rem;
        width: 0.5rem;
        right: 0.2rem;
    }

    .insuranceCheck:before {
        font-size: .6rem !important;
    }

    /*弹框*/
    .mui-popup {
        width: 80% !important;
    }

    .mui-popup .mui-popup-title {
        font-size: .3rem;
        line-height: 0.5rem;
        color: #000000;
        font-weight: bold;
    }

    .mui-popup .mui-popup-text {
        font-size: .28rem !important;
        text-align: left;
        line-height: 1.5;
    }

    .mui-popup .mui-popup-buttons {
        height: 0.8rem;
    }

    .mui-popup .mui-popup-buttons span {
        font-size: .35rem !important;
        height: 0.8rem;
        line-height: 0.8rem;
    }

    /*底部输入*/
    #contactInputWrap .mui-input-group {
        background: #fff;
        z-index: 1200;
        padding: 0.1rem 0;
    }

    #contactInputWrap .contactInputTitle {
        font-size: 0.4rem;
        text-align: center;
        color: #2f77e3;
        line-height: 1rem;
    }

    #contactInputWrap .mui-input-row {
        height: 0.8rem;
    }

    #contactInputWrap .mui-input-row label {
        height: 0.8rem;
        padding: 0.2rem 0.45rem;
    }
</style>
<script type="text/ecmascript-6">
    import '../../fonts/mui.css';
    import Page from '../../base/Page'
    import {API} from '../../config/constants'
    import wechat from '../../libs/wechat'
    import { Indicator } from 'mint-ui'

    const MAX_PHOTO = 9;

    export default new Page({
        vuex: {
            actions: {
                updOrderInsurance: function ({dispatch}, flag) {
                    dispatch('UPD_ORDER_INSURANCE', flag);
                },
                updOrderContract: function ({dispatch}, flag) {
                    dispatch('UPD_ORDER_CONTRACT', flag);
                }
            },
            getters: {
                carPlateNumber: function (state) {
                    return state.order.car.carPlateNumber;
                },
                carBrandModel: function (state) {
                    return state.order.car.carBrandModel;
                },
                carBuyPrice: function (state) {
                    return state.order.car.carBuyPrice;
                },
                carBuyDate: function (state) {
                    return state.order.car.carBuyDate;
                },
                brandImg: function (state) {
                    return state.order.car.brandImg;
                },
                isInsurance: function (state) {
                    return state.order.isInsurance;
                },
                details: function (state) {
                    return state.order.details;
                },
                enterprise: function (state) {
                    return state.order.enterprise;
                },
                order: function (state) {
                    return state.order;
                },
            }
        },
        data(){
            return {
                contract: {contractName: '', contractPhone: ''},
                maxPhoto: MAX_PHOTO,
                photoIds: []
            }
        },
        ready () {
            /*上拉下拉*/
            mui('.mui-scroll-wrapper').scroll({
                indicators: true, //是否显示滚动条
                deceleration : 0.0005,
            });
        },
        methods: {
            updContract: function () {
                mui('#contactInputWrap').popover('toggle');
            },

            insuranceCheck: function (e) {
                var popup = function () {
                    mui.alert('1）车损出险后，次年保险金额将会升高。<br>2）保险钣喷建设中，敬请期待。<br/>', '保险钣喷说明', function () {
                    });
                };
                if (e.target.checked == true) {
                    popup();
                    e.target.checked = false;

                } else {
                    return;
                }
            },
            addImage: function () {
                if (this.photoIds.length >= MAX_PHOTO) {
                    return
                }
                wechat.chooseImage(res => {
                    wechat.bulkUploadImages(res.localIds, photos => {
                        this.photoIds = this.photoIds.concat(photos)
                    })
                }, {
                    sizeType: ['compressed'],
                    count: MAX_PHOTO - this.photoIds.length
                })
            },
            delImage: function (index) {
                this.photoIds.splice(index, 1)
            },
            //提交订单
            confirm: function () {
                //组织订单结构，进行提交
                this.updOrderContract(this.contract);

                //处理接口订单结构
                var apiOrder = {};
                apiOrder.enterpriseId = this.order.enterprise.id;
                apiOrder.isInsurance = this.order.isInsurance;
                apiOrder.orderContact = this.order.contract.contractName;
                apiOrder.orderContactPhone = this.order.contract.contractPhone;
                apiOrder.orderTotalAmount = this.total;
                apiOrder.goodsCodes = this.goodsCodes;
                apiOrder.orderGoods = this.spec;
                apiOrder.carPlateNumber = this.order.car.carPlateNumber;
                apiOrder.carBrand = this.order.car.carBrand;
                apiOrder.carModel = this.order.car.carModel;
                apiOrder.carBuyDate = this.order.car.carBuyDate;
                apiOrder.carBuyPrice = this.order.car.carBuyPrice;
                apiOrder.orderImages = this.photoIds.map(pair => pair.server);

                //服务单位选择
                if (apiOrder.enterpriseId === undefined) {
                    mui.toast('请先选择服务单位',{ duration:'short', type:'div' });
                    return;
                }
                //联系人信息完善
                if(apiOrder.orderContact === '' || apiOrder.orderContactPhone === '') {
                    mui.toast('请完善联系人信息',{ duration:'short', type:'div' });
                    return;
                }
                //车损照片选择
                if (apiOrder.orderImages.length === 0) {
                    mui.toast('请至少上传一张车损照片',{ duration:'short', type:'div' });
                    return;
                }
                
                //commit order to server
                this.post(API.POST_ORDER, apiOrder, res => {

                    this.$route.router.go('/tip/success/banpen');
                });
            }

        },
        computed: {
            spec: function () {
                var spec = '';

                for (var i=0;i<this.details.length;i++) {
                    spec = spec + this.details[i].locName + '：' + this.details[i].spec + '；';
                }
                //特殊处理
                return spec;
            },
            total: function () {
                var total = 0;
                for (var i=0;i<this.details.length;i++) {
                    total = total + this.details[i].amount;
                }
                return total;
            },
            goodsCodes: function () {
                var codes = '';
                for (var i=0;i<this.details.length;i++) {
                    var items = this.details[i].items;
                    for (var item in items) {
                        codes = codes + ',' + item;
                    }
                }
                //特殊处理
                return codes.substring(1, codes.length);
            }
        },
    });
</script>

